<script lang="ts">
import { defineComponent, ref, watch, inject } from "vue";
import router from "@/router";
import { ElMessage } from 'element-plus'
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import overview from "./component/overview.vue";
import highlight from "./component/highlight.vue";
import topswiper from "@/components/topswiper.vue";

import supportItemVue from "@/components/supportItem.vue";
import relatedItemVue from "@/components/relatedItem.vue";
import pageTop from "@/components/pageTop.vue";
import { useRoute } from "vue-router";
import { getPlanDetail } from "@/network/Productapi";
import ContactModal from "@/components/contactModal.vue";
import { getAdvImages, getRandCompanyProduct } from "@/network/api";

export default defineComponent({
  name: "swiper-example-navigation",
  title: "Navigation",
  url: import.meta.url,
  components: {
    Swiper,
    SwiperSlide,
    overview,
    highlight,
    supportItemVue,
    pageTop,
    relatedItemVue,
    topswiper,
    ContactModal,
  },
  async setup() {
    const typeCard = ref("card") as any;
    const Route = useRoute();
    const solutionName = ref();
    const bannerList = ref() as any;
    const companyProduct = ref() as any;
    const solutionsType = ref("");
    const myFn = inject<any>("open");
    solutionName.value = Route.query.name;

    const getAdvBanner = async () => {
      solutionsType.value = "loop";
      const { data: bannerData } = await getAdvImages({ type: solutionsType.value });
      console.log(bannerData, 'adaisydtguasgdy');
      bannerList.value = bannerData;
      console.log(bannerList.value[0], 'bannerList.value');

    };

    const Goindustry = async (item: any) => {
      if (item.category1) {
        router.push({
          path: "/industryList",
          query: {
            id: item.category1,
            sonID: item.category2
          },
        });
      } else {
        // ElMessage({
        //   message: '该产品暂未设置行业，请稍后再试',
        //   type: 'warning',
        // })
      }
    }

    getRandCompanyProduct({
      pageSize: 9
    }).then(res => {
      console.log(res, 'res');
      companyProduct.value = res.data;
    })

    if (document.body.clientWidth < 768) {
      typeCard.value = '';
    } else {
      typeCard.value = "card";
    }
    getAdvBanner();
    watch(
      () => Route.query,
      (val: any) => {
        solutionName.value = val.name;
        getAdvBanner();
      }
    );
    return {
      myFn,
      solutionName,
      bannerList,
      typeCard,
      companyProduct,
      Goindustry,
      modules: [Navigation],
    };
  },
});
</script>

<template>
  <pageTop></pageTop>

  <div class="bgfff">
    <div class="content">

      <div style="display: flex;justify-content: center;">
        <div style="">
          <iframe scrolling='no' src="https://hz.gxq.oramage.com/video"></iframe>
          <!-- <iframe scrolling='no' src="http://localhost:8800/video"></iframe> -->
        </div>
      </div>

      <div class="contentText describe">
        <div>
          2020年仲恺高新区获得：国家级外贸转型升级基地（电子信息）称号，据外贸转型升级基地工作部署，已经建立基地专职工作站，授权惠州市电子信息产业协会负责日常运营，继续做好基地内企业各项数据统计检测，增加与基地内的企业关系的粘性，加强对外贸企业、特色产业发展资源要素配置等领域的专题研究，提出对策建议。着力推广基地企业品牌，促进基地企业抱团参展，品牌推广，科学推进区域内资外贸企业技术升级改造以及高质量发展，帮助基地内外贸企业转型升级，落实好中央部署内外双循环布局，开拓国内外市场，实现基地外贸的持续增长，着力打造高质量国家级基地品牌。
        </div>
        <div>
          现基地已建成线下总面积1500m²的一站式外经贸提质增效展示交流中心，位于仲恺高新区科融大厦4楼，现已投入使用。线下展示交流中心将一站式展示仲恺高新区全貌、5+1产业发展、外经贸转型升级及提质增效成果等，同时对区内企业的主要电子产品进行集中展示，打造永不落幕的外贸展会。世界各地的企业家选择到仲恺投资，通过本展示交流中心即可便捷、迅速的观看到惠州产业链的整体情况。同时通过全景式线上平台，促进海内外企业家通过线上实时展厅信息，便捷了解我基地内企业的产品情况，有效展示企业产品成果，为海内外企业家提供一站式的展示窗口，促进基地对外品牌宣传。
        </div>
      </div>

      <div style="padding-top: 30px">
        <el-carousel v-if="bannerList && bannerList.length" :interval="4000" :type="typeCard" height="441px"
          :initial-index='0'>
          <el-carousel-item v-for="item in bannerList" :key="item">
            <!-- <h3 text="2xl" justify="center">{{ item.url }}</h3> -->
            <div class="loopBox">
              <img :src="item.url" alt="" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>

  <div class="content text_center">
    <div class="bigTitle" style="margin-bottom: 80px">精选产品</div>

    <div>
      <el-row :gutter="61">
        <el-col :span="8" :xs='24' v-for="item in companyProduct">
          <div class="productItem flex flex_column align_center" @click="Goindustry(item)">
            <div class="imgBox scaleImgCard">
              <el-image style="width: 100%;height: 100%;" :key="item.image" :src="item.image" lazy fit="cover" />
            </div>
            <div class="contentText">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.describe {
  text-indent: 2em;
  margin-top: 73px;

  div {
    margin-top: 20px;
  }
}

.loopBox {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



.breadcrumb {
  border-bottom: 2px solid $auxiliaryColor3;
  padding: 20px 0;
}

.productItem {
  margin-bottom: 71px;

  .imgBox {
    width: 393px;
    height: 215px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      object-fit: contain;
    }
  }

  .contentText {
    margin-top: 23px;
  }
}

.content {
  margin: 0 auto;
  overflow: hidden;



  iframe {
    width: 1420px;
    height: 800px;
    border: none;
    outline: none;
    border-radius: 10px;
    overflow: hidden;
  }

  .header {
    display: flex;
    width: 100%;
    padding: 44px 0 53px 0;

    .headerLeft {
      width: 450px;
      height: auto;
      margin-right: 30px;
      background-color: #e8f3ff;
      padding: 0 30px;
      border-radius: 20px;

      .headerLeftTitle {
        margin: 60px 0px 20px 0px;
      }

      .headerLeftButton {
        margin: 20px 0;
      }
    }

    .topSwiper {
      display: none;
    }

    .atopSwiper {
      display: block;
    }
  }
}

@media screen and (max-width: 768px) {
  .describe {
    margin-top: 36px;
  }

  .productItem {
    .imgBox {
      width: 100%;
    }
  }

  .productItem {
    margin-bottom: 50px;
  }

  .content {
    iframe {
      width: 100%;
      height: 168px;
    }

    .header {
      padding: 30px 0px !important;
      flex-direction: column;

      .headerLeft {
        width: 100%;
        height: 100%;
        padding: 0 30px 20px 30px;
        border-radius: 8px;
        margin-top: 20px;

        .headerLeftTitle {
          margin: 20px 0px 20px 0px;
        }
      }

      .topSwiper {
        display: block;
      }

      .atopSwiper {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 1440px) {
  .headerLeftTitle {
    margin: 10px 0px 20px 0px !important;
  }
}
</style>
